/*
 * @ModuleName:
 * @Author: zhuzhaofeng
 * @Date: 2020-05-08 21:54:57
 */
import CustomTable from "@/components/CustomTable";
import { Tree, Message, Tooltip, MessageBox } from "element-ui";
import { gradeList } from "@/apis/grade";
import { studentList, studentRemove } from "@/apis/students";
import { array2Tree } from "@/utils";
import StudentInputDialog from "./StudentInputDialog";
export default {
  name: "Student",
  components: {
    CustomTable,
    StudentInputDialog,
    "el-tree": Tree,
    "el-tooltip": Tooltip,
  },
  data() {
    return {
      // 搜索使用
      searchGradeId: undefined,
      // 编辑模态窗控制
      inputDialogVisible: false,
      // 当前学生信息(tree节点单击以及修改会有值)
      currentStudent: { gradeId: "", gradeName: "" },
      treeArray: [],
      // tree 参数 配置
      tree: {
        data: [],
        props: {
          children: "children",
          label: "name",
        },
      },
      // table 参数配置及分页配置参数
      student: {
        data: [],
        attrs: { size: "small" },
        events: {},
        cols: [
          { type: "index" },
          {
            prop: "number",
            label: "学号",
          },
          {
            prop: "username",
            label: "姓名",
          },
          {
            prop: "gradeName",
            label: "班级",
          },
          {
            prop: "headmaster",
            label: "班主任",
          },
          {
            prop: "guardian",
            label: "监护人",
          },
          {
            prop: "guardianPhone",
            label: "监护人联系方式",
          },
          {
            label: "操作",
            width: "180",
            flexd: "right",
            scopedSlots: {
              default: (scoped) => {
                return (
                  <span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="修改"
                      placement="bottom-end"
                    >
                      <el-button
                        onClick={() => this.handlerModifyStudent(scoped.row)}
                        type="primary"
                        plain
                        size="mini"
                        icon="el-icon-edit"
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="删除"
                      placement="bottom-end"
                    >
                      <el-button
                        onClick={() => this.handlerRemoveStudent(scoped.row)}
                        type="danger"
                        plain
                        size="mini"
                        icon="el-icon-delete"
                      ></el-button>
                    </el-tooltip>
                  </span>
                );
              },
            },
          },
        ],
        paging: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
      },
    };
  },
  mounted() {
    this.getGradeList();
    this.getStudentList();
  },
  methods: {
    /**
     * @author zhuzhaofeng
     * @description: 添加年级 处理函数
     */
    handlerAddGrade() {
      if (!this.currentStudent.gradeId) {
        Message.error("请勾选节点进行添加年级或班级");
        return false;
      }
    },
    /**
     * @author zhuzhaofeng
     * @description: 添加学生 处理函数
     */
    handlerAddStudent() {
      if (!this.currentStudent.gradeId) {
        Message.error("请勾选年级或班级添加学生");
        return false;
      }
      this.inputDialogVisible = true;
    },
    /**
     * @author zhuzhaofeng
     * @description: 修改学生 处理函数
     */
    handlerModifyStudent(row) {
      // 合并数据 (此方法合并数据为可监听)
      this.currentStudent = Object.assign({}, this.currentStudent, row);
      this.inputDialogVisible = true;
    },
    /**
     * @author zhuzhaofeng
     * @description: 删除学生 处理函数
     */
    handlerRemoveStudent(row) {
      MessageBox.confirm(
        `此操作将永久删除学生[${row.username}], 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          studentRemove(row.id).then((res) => {
            Message.success(`[${row.username}]删除成功!`);
            this.getStudentList();
          });
        })
        .catch(() => {
          Message.info("已取消删除");
        });
    },
    /**
     * @author zhuzhaofeng
     * @description: 获取年级信息
     */
    getGradeList() {
      gradeList().then((res) => {
        this.treeArray = res;
        this.tree.data = array2Tree(res, "id", "parent", "root");
      });
    },
    /**
     * @author zhuzhaofeng
     * @description: 获取学生信息
     */
    getStudentList() {
      let queryData = {
        // 这里有个特殊操作 所有年级id为1 所以在所有年级的情况下不传递 年级id
        gradeId: this.searchGradeId === "1" ? undefined : this.searchGradeId,
      };
      studentList(queryData).then((res) => {
        this.student.data = res;
        this.student.total = res.length;
      });
    },
    /**
     * @author zhuzhaofeng
     * @description: Tree 节点单击事件
     */
    handleTreeNodeClick(data) {
      this.searchGradeId = data.id;
      this.currentStudent.gradeId = data.id;
      this.currentStudent.gradeName = data.name;
      this.$refs.tree.setCheckedKeys([data.id]);
      this.getStudentList();
    },
    /**
     * @author zhuzhaofeng
     * @description: Tree 节点勾选改变事件
     */
    handlerTreeCheckChange(data, node) {
      if (node == true) {
        this.currentStudent.gradeId = data.id;
        this.currentStudent.gradeName = data.name;

        this.$refs.tree.setCheckedKeys([data.id]);
      } else {
        if (this.currentGradeId == data.id) {
          this.$refs.tree.setCheckedKeys([data.id]);
        }
      }
    },
    /**
     * @author zhuzhaofeng
     * @description: 监听学生信息编辑窗口关闭事件 重新获取列表数据
     */
    handlerStudentDialogClose() {
      this.getStudentList();
      let keys = this.$refs.tree.getCheckedKeys();
      const { gradeId, gradeName } = this.currentStudent;
      if (keys.length > 0) {
        this.currentStudent = {
          gradeId,
          gradeName,
        };
      } else {
        this.currentStudent = {};
      }
    },
  },
};
